<template>
    <div style="width: 100%;height: 100%;background: #fff;position: fixed;">
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
<!--            <bar :text="name"></bar>-->
            <div class="bar">
                <img class="returnImg" src="../../assets/imgs/home/returnIcon2.png" alt="" v-on:click="back">
                <p class="title" style="padding:0;">{{name}}</p>
            </div>
        </div>

        <div>
            <titles v-if="type == 0" style="margin-left: 15px;padding-top: 76px" text="坪效趋势"></titles>
            <titles v-if="type == 1" style="margin-left: 15px;padding-top: 76px" text="客流趋势"></titles>
            <titles v-if="type == 2" style="margin-left: 15px;padding-top: 76px" text="销售额趋势"></titles>
            <titles v-if="type == 3" style="margin-left: 15px;padding-top: 76px" text="集客力趋势"></titles>
            <titles v-if="type == 4" style="margin-left: 15px;padding-top: 76px" text="转化率趋势"></titles>
            <titles v-if="type == 5" style="margin-left: 15px;padding-top: 76px" text="店铺价值趋势"></titles>
            <div class="kpiTop">
                <div class="kpiChange">
                    <p :class="kpiData == 3?'txt1':'txta'" @click="changeData4">日</p>
                    <p :class="kpiData == 0?'txt4':'txtd'" @click="changeData1">周</p>
                    <p :class="kpiData == 1?'txt2':'txtb'" @click="changeData2">月</p>
                    <p :class="kpiData == 2?'txt3':'txtc'" @click="changeData3">年</p>
                </div>
                <div v-if="kpiData == 0">
                    <el-date-picker
                            @change="changeInout2"
                            v-model="value2"
                            type="week"
                            format="yyyy 第 WW 周"
                            placeholder="选择周">
                    </el-date-picker>
                </div>
                <div  v-if="kpiData == 1">
                    <el-date-picker
                            @change="changeInout3"
                            v-model="value3"
                            type="month"
                            placeholder="选择月">
                    </el-date-picker>
                </div>
                <div  v-if="kpiData == 2">
                    <el-date-picker
                            @change="changeInout4"
                            v-model="value3"
                            type="year"
                            placeholder="选择年">
                    </el-date-picker>
                </div>
            </div>
            <div v-if="kpiData == 3" class="timeChange">
                <p style="font-size: 14px;color: #255ED7;">起：</p>
                <el-time-select
                        placeholder="08:00"
                        v-model="startTime"
                        :picker-options="{
                          start: '08:00',
                          step: '00:15',
                          end: '23:00'
                        }">
                </el-time-select>
                <p style="width: 24px;height: 1px;background: #979797;margin-left: 10px;margin-right: 10px;"></p>
                <p style="font-size: 14px;color: #255ED7;">止：</p>
                <el-time-select
                        placeholder="23:00"
                        v-model="endTime"
                        @change="changeInout1"
                        :picker-options="{
                          start: '08:00',
                          step: '00:15',
                          end: '23:00'
                        }">
                </el-time-select>
            </div>
        </div>
        <p v-if="type == 0" style="font-size: 12px;color: #666666;margin-left: 16px;margin-top: 28px;">单位（元/㎡）</p>
        <p v-if="type == 1" style="font-size: 12px;color: #666666;margin-left: 16px;margin-top: 28px;">单位（人/次）</p>
        <p v-if="type == 2" style="font-size: 12px;color: #666666;margin-left: 16px;margin-top: 28px;">单位（万元）</p>
        <p v-if="type == 3" style="font-size: 12px;color: #666666;margin-left: 16px;margin-top: 28px;">单位（人/㎡）</p>
        <p v-if="type == 4" style="font-size: 12px;color: #666666;margin-left: 16px;margin-top: 28px;">单位（百分比）</p>
        <p v-if="type == 5" style="font-size: 12px;color: #666666;margin-left: 16px;margin-top: 28px;">单位（分）</p>
        <div class="charts" style="margin-top: -14px;margin-left: -23px;" id="myChart">
            <chart :text="type" ref="child"></chart>
        </div>
    </div>
</template>

<script>
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar2";
    import chart from "../../components/chart";
    export default {
        data(){
            return{
                type:0,
                name:'',
                kpiData:3,
                fid:'',
                value1: '',
                value2: '',
                value3: '',
                value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
                startTime:'',
                endTime:''
            }
        },
        components: {
            titles,
            bar,
            chart
        },
        mounted() {
            this.type= this.$route.query.type
            this.name=this.$route.query.name
            this.fid = this.$route.query.fid
            var time1 = '8:00'
            var time2='23:00'
            if(this.type == 0){
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'plateau',time1,time2)
            }else if(this.type == 1){
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'flow',time1,time2)
            }else if(this.type == 2){
                console.log('00')
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'sale',time1,time2)
            }else if(this.type == 3){
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'collect',time1,time2)
            }else if(this.type == 4){
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'trans',time1,time2)
            }else if(this.type == 5){
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'value',time1,time2)
            }


        },
        methods:{
            // 周
            changeData1(){
                this.kpiData = 0
                var data = new Date()
                var nweData=data.getFullYear() + '-' + '0' +(data.getMonth()+1) + '-' + data.getDate()
                if(this.type == 0){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'plateau',nweData)
                }else if(this.type == 1){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'flow',nweData)
                }else if(this.type == 2){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'sale',nweData)
                }else if(this.type == 3){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'collect',nweData)
                }else if(this.type == 4){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'trans',nweData)
                }else if(this.type == 5){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'value',nweData)
                }
            },
            // 月
            changeData2(){
                this.kpiData = 1
                var data = new Date()
                var nweData=data.getFullYear() + '-' + '0' +(data.getMonth()+1) + '-01'
                if(this.type == 0){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'plateau',nweData)
                }else if(this.type == 1){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'flow',nweData)
                }else if(this.type == 2){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'sale',nweData)
                }else if(this.type == 3){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'collect',nweData)
                }else if(this.type == 4){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'trans',nweData)
                }else if(this.type == 5){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'value',nweData)
                }
            },
            // 年
            changeData3(){
                var nweData= '2020-01-01'
                this.kpiData = 2
                if(this.type == 0){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'plateau',nweData)
                }else if(this.type == 1){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'flow',nweData)
                }else if(this.type == 2){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'sale',nweData)
                }else if(this.type == 3){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'collect',nweData)
                }else if(this.type == 4){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'trans',nweData)
                }else if(this.type == 5){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'value',nweData)
                }
            },
            // 日
            changeData4(){
                this.kpiData = 3
                var time1 = '8:00'
                var time2='23:00'
                if(this.type == 0){
                    this.$refs.child.detail2(this.kpiData,this.name,this.fid,'plateau',time1,time2)
                }else if(this.type == 1){
                    this.$refs.child.detail2(this.kpiData,this.name,this.fid,'flow',time1,time2)
                }else if(this.type == 2){
                    console.log('00')
                    this.$refs.child.detail2(this.kpiData,this.name,this.fid,'sale',time1,time2)
                }else if(this.type == 3){
                    this.$refs.child.detail2(this.kpiData,this.name,this.fid,'collect',time1,time2)
                }else if(this.type == 4){
                    this.$refs.child.detail2(this.kpiData,this.name,this.fid,'trans',time1,time2)
                }else if(this.type == 5){
                    this.$refs.child.detail2(this.kpiData,this.name,this.fid,'value',time1,time2)
                }
            },
            // 选择周
            changeInout2(){
                if ((this.value2.getMonth()+1) < 10){
                    if((this.value2.getDate()) <10){
                        var nweData = this.value2.getFullYear() + '-' + '0' +(this.value2.getMonth()+1) + '-' + '0' +this.value2.getDate()
                        var newData2 = this.value2.getFullYear() + '-' + '0' + (this.value2.getMonth()+1) + '-' + '0'+ (this.value2.getDate()-1)
                    }else{
                        if((this.value2.getDate()-1) < 10){
                            var nweData = this.value2.getFullYear() + '-' + '0' +(this.value2.getMonth()+1) + '-' + this.value2.getDate()
                            var newData2 = this.value2.getFullYear() + '-' + '0' + (this.value2.getMonth()+1) + '-' + '0' +(this.value2.getDate()-1)
                        }else{
                            var nweData = this.value2.getFullYear() + '-' + '0' +(this.value2.getMonth()+1) + '-' + this.value2.getDate()
                            var newData2 = this.value2.getFullYear() + '-' + '0' + (this.value2.getMonth()+1) + '-' + (this.value2.getDate()-1)
                        }

                    }

                }else {
                    var nweData = this.value2.getFullYear() + '-' + (this.value2.getMonth()+1) + '-' + this.value2.getDate()
                    var newData2 = this.value2.getFullYear() + '-' + (this.value2.getMonth()+1) + '-' + (this.value2.getDate()-1)
                }
                if(this.type == 0){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'plateau',nweData)
                }else if(this.type == 1){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'flow',nweData)
                }else if(this.type == 2){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'sale',nweData)
                }else if(this.type == 3){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'collect',nweData)
                }else if(this.type == 4){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'trans',nweData)
                }else if(this.type == 5){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'value',nweData)
                }
            },
            // 选择月
            changeInout3(){
                if ((this.value3.getMonth()+1) < 10){
                    var nweData = this.value3.getFullYear() + '-' + '0' +(this.value3.getMonth()+1) + '-01'
                    var newData2 = this.value3.getFullYear() + '-' + '0' + (this.value3.getMonth())

                }else {
                    var nweData = this.value3.getFullYear() + '-' + (this.value3.getMonth()+1)+ '-01'
                    var newData2 = this.value3.getFullYear() + '-' + (this.value3.getMonth())
                }
                // console.log(nweData)
                if(this.type == 0){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'plateau',nweData)
                }else if(this.type == 1){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'flow',nweData)
                }else if(this.type == 2){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'sale',nweData)
                }else if(this.type == 3){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'collect',nweData)
                }else if(this.type == 4){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'trans',nweData)
                }else if(this.type == 5){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'value',nweData)
                }
            },
            // 选择年
            changeInout4(){

                // console.log(this.value3.getFullYear())
                var nweData = this.value3.getFullYear()+'-01-01'
                if(this.type == 0){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'plateau',nweData)
                }else if(this.type == 1){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'flow',nweData)
                }else if(this.type == 2){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'sale',nweData)
                }else if(this.type == 3){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'collect',nweData)
                }else if(this.type == 4){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'trans',nweData)
                }else if(this.type == 5){
                    this.$refs.child.detail(this.kpiData,this.name,this.fid,'value',nweData)
                }
            },
            // 选中时间
            changeInout1(){
                this.$refs.child.detail2(this.kpiData,this.name,this.fid,'value',this.startTime,this.endTime)
            },
            back(){
                localStorage.setItem('searchKeyword', this.type)
                this.$router.go(-1);//返回上一层
            },
        },
        beforeDestroy() {
            localStorage.setItem('searchKeyword', this.type)
        },
    }
</script>

<style scoped lang="scss">
    .bar{
        display: flex;
        align-items: center;
        position: fixed;
        height: 48px;
        top: 0;
        left: 0;
        width: 100%;
        background:linear-gradient(270deg,rgba(64,134,231,1) 0%,rgba(37,94,215,1) 100%);
        box-shadow:0px 1px 15px 0px rgba(193,193,193,0.5);
        position: relative;
        .returnImg{
            z-index: 100;
            width: 10px;
            height: 19px;
            left: 16px;
            position: absolute;
            top: 14px;
        }
        .title{
            text-align: center;
            flex: 1;
            font-size: 18px;
            color: #fff;
            font-width: 500;
        }
    }
    body{
        background: #fff !important;
    }
    #app{
        background: #fff !important;
    }
    .kpiTop{
        margin-top: 26px;
        display: flex;
        align-items: center;
        margin-left: 18px;
        margin-right: 18px;
        display: flex;
    .kpiChange{
        flex: 1;
        display: flex;
    .txt1{
        width: 46px;
        height: 28px;
        background:rgba(37,94,215,1);
        box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
        border-radius:5px 0px 0px 5px;
        font-size: 14px;
        color: #fff;
        line-height: 29px;
        text-align: center;
    }
    .txt2{
        width: 44px;
        height: 28px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 29px;
        background:rgba(37,94,215,1);
        box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
    }
    .txtd{
        width: 44px;
        height: 26px;
        border: 1px solid #E1E1E1;
        border-left-style: none;
        font-size: 14px;
        color: #999999;
        text-align: center;
        line-height: 28px;
        background: #FFFFFF;
        border-right: 1px solid #E1E1E1;
    }
    .txt3{
        width: 46px;
        height: 28px;
        background:rgba(37,94,215,1);
        box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
        border-radius:0px 5px 5px 0px;
        font-size: 14px;
        color: #fff;
        line-height: 29px;
        text-align: center;
    }
    .txt4{
        width: 44px;
        height: 28px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 29px;
        background:rgba(37,94,215,1);
        box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
        border-right: 1px solid rgba(116,133,169,0.31);
    }
    .txta{
        width: 44px;
        height: 26px;
        border: 1px solid #E1E1E1;
        font-size: 14px;
        color: #999999;
        text-align: center;
        line-height: 28px;
        border-radius:5px 0px 0px 5px;
        background: #FFFFFF;
    }
    .txtb{
        width: 44px;
        height: 26px;
        border: 1px solid #E1E1E1;
        border-right-style: none;
        border-left-style: none;
        font-size: 14px;
        color: #999999;
        text-align: center;
        line-height: 28px;
        background: #FFFFFF;
    }
    .txtc{
        width: 44px;
        height: 26px;
        border: 1px solid #E1E1E1;
        border-radius:0px 5px 5px 0px;
        font-size: 14px;
        color: #999999;
        text-align: center;
        line-height: 28px;
        background: #FFFFFF;
    }
    }
    }
    /*折线图*/
    /deep/ .el-select .el-input .el-select__caret {
        height: 0;
    }

    /deep/ .el-picker-panel {
        position: absolute;
        right: 36px;
    }

    /deep/ .emcs_charts {
        min-width: 380px !important;
    }

    /deep/ .el-input--mini .el-input__inner {
        width: 105px;
        font-size: 16px;
        line-height: 26px;
    }

    /deep/ #myChart {
        min-width: 300px;
        /*margin-right: 20px;*/
    }

    /*选择框*/
    /deep/body{
        background: #fff !important;
    }
    /deep/.el-date-editor{
        width: 118px !important;
        height: 28px !important;
        background: #fff;
        display: flex;
        align-items: center;
    }
    /deep/.el-input__inner{
        width: 118px !important;
        height: 28px !important;
        line-height: 29px !important;
        background: #fff;
        display: block;
        align-items: center;
        padding-left: 30px !important;
        padding-right: 0 !important;
        color: #999999 !important;
    }
    /deep/.el-input__prefix{
        top:-6px !important;
    }
    /deep/.el-input__suffix{
        display: none !important;
    }

    /*时间选择器*/
    .timeChange{
        display: flex;
        align-items: center;
        margin-left: 18px;
        margin-top: 20px;
    }
    /deep/.timeChange .el-date-editor{
        width: 62px !important;
        height: 28px !important;
        background: #fff;
        display: flex;
        align-items: center;
    }
    /deep/.timeChange .el-date-editor .el-input__inner{
        width: 62px !important;
        height: 28px !important;
        padding-left: 10px !important;
    }
    /deep/.timeChange .el-date-editor .el-input__prefix{

        display: none !important;
    }
    .timeChange .el-date-editor .el-input__icon{
        line-height: 20px !important;
    }
    .timeChange .el-date-editor .el-range-separator{
        line-height: 20px !important;
    }
</style>
